<template>
  <el-menu
    :mode="mode"
    :collapse="collapse"
    :collapse-transition="collapseTransition"
    :background-color="backgroundColor"
    :text-color="textColor"
    :active-text-color="themeColor"
    unique-opened
    menu-trigger="hover"
    :default-active="selectedKey"
    :default-openeds="defaultOpenKeys"
    @select="handleSelect"
    class="menu"
  >
    <el-submenu v-for="routes in menus" :key="routes.id" :index="routes.id">
      <template #title>
        <el-icon :color="activeTextColor(routes.id)">
          <menu-icon :style="{ color: activeTextColor(routes.id) }"></menu-icon>
        </el-icon>
        <span :style="{ color: activeTextColor(routes.id) }">
          {{ routes.title }}
        </span>
      </template>
      <el-menu-item
        v-for="menu in routes.children"
        :key="menu.id"
        :index="menu.id"
      >
        <el-icon>
          <star />
        </el-icon>
        <span>{{ menu.title }}</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { Menu as MenuIcon, Star } from '@element-plus/icons'
  export default {
    name: 'MyMenu',
    components: {
      MenuIcon,
      Star,
    },
    props: {
      mode: String, // 菜单类型，horizontal / vertical
      collapse: {
        type: Boolean,
        default: false,
      }, // 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）
    },
    data() {
      return {
        selectedKey: '', // 当前选中的菜单项 key
        openKeys: [], // 当前展开的 SubMenu 菜单项 key 数组
        defaultOpenKeys: [], // 默认展开的菜单项
        collapseTransition: false, // 是否开启折叠动画
      }
    },
    // 计算属性
    computed: {
      ...mapGetters({
        themeStyle: 'user/themeStyle',
        themeColor: 'user/themeColor',
        accessToken: 'user/accessToken',
        menus: 'user/menus',
      }),
      // 背景色
      backgroundColor() {
        return this.themeStyle == '1' ? '#fff' : '#000'
      },
      // 文字颜色
      textColor() {
        return this.themeStyle == '1' ? '#000' : '#fff'
      },
    },
    // 页面渲染前
    created() {
      this.selectedKey = this.$route.name
      var pKeys = this.$route.path.split('/')
      if (pKeys[pKeys.length - 1] == this.$route.name) {
        for (let index = 1; index < pKeys.length; index++) {
          this.openKeys.push(pKeys[index])
          if (this.mode == 'vertical') {
            this.defaultOpenKeys.push(pKeys[index])
          }
        }
      }
    },
    // 方法
    methods: {
      // 选择的颜色
      activeTextColor(id) {
        return this.openKeys.indexOf(id) == -1
          ? this.textColor
          : this.themeColor
      },
      // 选择
      handleSelect(index, indexPath) {
        if (indexPath && indexPath.length > 0) {
          this.openKeys = indexPath[0]
        }
        this.$router.push({ name: index, query: { id: index } })
      },
    },
  }
</script>

<style lang="scss">
  $menu-item-height: 48px;
  // 菜单高度设置
  .menu {
    height: 100%;
    .el-submenu {
      .el-submenu__title {
        height: $menu-item-height !important;
        line-height: $menu-item-height !important;
        .el-icon {
          vertical-align: unset;
        }
      }
      .el-menu {
        .el-menu-item {
          height: $menu-item-height !important;
          line-height: $menu-item-height !important;
          .el-icon {
            vertical-align: unset;
          }
        }
      }
    }
  }
  // 横向菜单不换行
  .el-menu--horizontal {
    white-space: nowrap;
    .el-submenu {
      display: inline-block;
      float: none !important;
    }
  }
</style>
